<template>
	<view class="video">

		<image class="bgs" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/record/2.png"
			mode="">
		</image>
		<view class="tips">
			<view class="">
				下拉刷新可查看作品状态

			</view>
			<view class="">
				生成的作品保留7天，请您尽快保存～
			</view>
		</view>

		<u-sticky bgColor="none">
			<view :class="[hasbg?'bgs1':'']">
				<view class="tabs">
					<u-tabs height="60" bg-color="none" font-size="28" active-color="#fff" :bar-style="barSty"
						:active-item-style="ActiveStyle" inactive-color="#fff" :list="list" :current="current"
						@change="change">
					</u-tabs>
				</view>
			</view>
		</u-sticky>


		<!-- </u-sticky> -->

		<view v-if="list1.length">
			<view class="list" >
				<view class="item" v-for="(item,index) in list1">
			
					<view class="mask">
						<view class="name">
							{{item.pro_name}}
						</view>
						<view class="status name">
							<!-- 状态：1制作中2制作成功3制作失败 -->
							<image class="icon"
								src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/record/1.png"
								mode=""></image>
							制作成功
							{{item.status}}
						</view>
					</view>
			
					<view class="bot">
						前往下载
					</view>
					<!-- <image src="" mode=""></image> -->
					<u-image width="100%" height="100%"
						:src="item.cover_url"
						:lazy-load="true"></u-image>
				</view>
				
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>
		<view v-else class="empty">
			<u-empty src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/nodata!.png" v-if="!list1.length && senDate"
				text="暂无数据" mode="list"></u-empty>
		</view>
		
	</view>
</template>

<script>
	export default {

		data() {
			return {
				
				total: null, //总共多少条数据
				formData: {
					pageSize: 10, //每页10条数据
					page: 1, //第几页
					topic: "",
				},
				status: "more",
				senDate: false,
				list1: [],
				make_tablist: [], //获取制作记录前三个
				hasbg: false,
				bgs: "#cccccc",
				
				types:'',

				list: [{
					name: '视频定制',

				}, {
					name: '配音合成',

				}, {
					name: '图文'
				}, {
					name: '头像'
				}],
				current: 0,
				ActiveStyle: {
					fontSize: '32rpx',
				},
				ActiveStyle1: {
					fontSize: '24rpx',
				},
				barSty: {
					width: '50rpx',
					height: '5rpx',
					background: '#68C3C9'
				},
				barSty1: {
					width: '50rpx',
					height: '0',
					background: '#68C3C9'
				},
			}
		},


		onPageScroll(e) { //uniapp自带的监听滚动条方法
			console.log(e);
			let top = e.scrollTop

			if (top >= 150) {
				this.hasbg = true
			} else {
				this.hasbg = false
			}

		},
		onLoad() {
			this.getcatelist() //顶部分类
		},
		
		       onPullDownRefresh() {
					let that = this
					that.formData.page=1
					 that.list1=[]
					that.getlist()
					setTimeout(function() {
						uni.stopPullDownRefresh();//停止页面加载动画
					}, 1000);
				},

		
		onReachBottom() {
			let allTotal = this.formData.page * this.formData.pageSize;
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;
		
				this.getlist();
		
			} else {
				this.status = "noMore"; //加载完状态
				console.log("已加载全部数据");
			}
		},
		methods: {
			getcatelist() {
				this.$u.api.mine.make_sort({
					appletId: this.vuex_appletId
				}).then(res => {
					this.list = res.data?.map(r => {
						return {
							...r,
							name: r.sort_name
						}
					})
					this.getlist()
				})

			},
			
			
			// 获取图集列表
			getlist() {
				this.senDate = false;
				this.$u.api.mine.make_list({
						appletId: this.vuex_appletId,
						page: this.formData.page,
						size: this.formData.pageSize,
						types: this.list[this.current]?.type, //分类可选参数，video视频 image图文 avatar头像
					})
					.then((res) => {
						this.senDate = true;
						if (res.code == 200) {
							this.total = res.data.total;
							this.list1 = this.list1.concat(res.data.list);
			
			
							this.list1 = this.list1.map(r => {
								return {
									...r,
									resourcesList: r?.resourcesList?.slice(0, 4)
								}
							})

							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}
						} else {
							console.log("请求数据失败");
						}
					});
			},
			
			
			change(index) {
				this.current = index;
				 this.formData.page=1
				 this.list1=[]
				this.getlist()
			},
		

		}
	}
</script>

<style scoped lang="scss">
	.bgs1 {
		overflow: hidden;
		width: 100%;
		background: rgba(19, 20, 32, 1);
		z-index: 8;
	}

	.tabs1 {
		margin: 0 24rpx 24rpx;
		background: #1F2135;
		border-radius: 95rpx !important;
		padding-top: 8rpx;
	}

	.tabs {
		margin: 0 24rpx 12rpx;
	}

	.todayPlay {
		margin-left: 24rpx;
		margin-bottom: 24rpx;

		.bookshelf-content {
			white-space: nowrap; // 滚动必须加的属性
			width: 100%;
			height: 147upx;

			.item {
				width: 284upx;
				height: 147upx;
				margin-right: 24upx;
				display: inline-block;
				vertical-align: top;

				.img {
					display: inline-block;

					image {
						width: 284upx;
						height: 147upx;
						border-radius: 21upx;
					}
				}

			}
		}
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		margin: 17rpx 24rpx;

		.item {
			position: relative;
			width: 339rpx;
			height: 516rpx;
			margin-bottom: 24rpx;
			border-radius: 12rpx;
			overflow: hidden;

			&:nth-child(2n+1) {
				margin-right: 24rpx;
			}


			.bot {
				position: absolute;
				width: 196rpx;
				height: 60rpx;
				border-radius: 70rpx;
				bottom: 20rpx;
				right: 72rpx;
				z-index: 8;
				background: #16AC51;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 28rpx;

				// background: url("https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/24.png") no-repeat;
				// background: 100% 100%;
				image {
					width: 219rpx;
					height: 57rpx;
					position: absolute;
					z-index: 8;
				}

				.blur {
					backdrop-filter: blur(8px);
					width: 219rpx;
					height: 57rpx;
					position: absolute;
					right: 0;
					bottom: 0;
					z-index: 6;
				}
			}

			.mask {
				position: absolute;
				top: 16rpx;
				left: 0;
				z-index: 8;
			}

			.name {


				padding: 10rpx 16rpx;
				background: rgba(0, 0, 0, 0.45);

				font-size: 24rpx;
				font-family: PingFang HK, PingFang HK;
				font-weight: 300;
				color: #FFFFFF;
				line-height: 34rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 0 30px 30px 0;
			}

			.status {
				margin-top: 17rpx;

				.icon {
					width: 17rpx;
					height: 11rpx;
					margin-right: 11rpx;

				}
			}

		}
	}

	.bgs {
		width: 100%;
		height: 283rpx;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		z-index: -1;
	}

	.tips {

		background: url("https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/record/3.png") no-repeat;
		background-size: cover;
		width: 702rpx;
		height: 113rpx;
		margin: 56rpx auto 41rpx;
		padding: 20rpx 0 0 106rpx;

		>view {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 300;
			color: #FFFFFF;
			line-height: 37rpx;

		}
	}

	.banner {

		padding-top: 86rpx;

		.search {
			position: relative;


			padding-left: 48rpx;
			font-size: 28rpx;
			font-family: PingFang SC,
				PingFang SC;
			font-weight: 300;
			color: #FFFFFF;
			display: flex;
			align-items: center;

			margin: 0 auto 30rpx;
			width: 702rpx;
			height: 92rpx;
			background: rgba(255, 255, 255, 0.06);
			border-radius: 53rpx;


			.icon {
				position: absolute;
				right: 0;
				top: 0;

				width: 92rpx;
				height: 92rpx;
				background: #8CC950;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				.imgs {
					width: 51rpx;
					height: 51rpx;
				}
			}
		}
	}
</style>
